<template>
  <el-card class="box-card">
    <!-- 搜索区域 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入书名" v-model="queryInfo.bookTitle">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="findAll()"
          ></el-button>
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-input placeholder="请输入借阅人" v-model="queryInfo.userName">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="findAll()"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="recordId"
        label="借阅编号"
        style="width: 25%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="bookTitle"
        label="书名"
        style="width: 25%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="借阅人"
        style="width: 25%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="borrowDate"
        label="借阅时间"
        style="width: 25%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="returnDate"
        label="归还时间"
        style="width: 25%"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" style="width: 25%" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteById(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="text-align: center;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[1, 3, 5, 7]"
        :page-size="5"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      // 条件
      queryInfo: {
        page: 1,
        pageSize: 5,
      },
      total: 0,
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    // 每页显示多少条数据回调
    handleSizeChange(pageSize) {
      this.queryInfo.pageSize = pageSize
      this.findAll()
    },
    // 当前页发生改变的回调
    handleCurrentChange(page) {
      this.findAll(page)
    },
    async findAll(page = 1) {
      this.queryInfo.page = page
      const { data: res } = await this.$http.post(
        '/record/findAll',
        this.queryInfo
      )
      this.tableData = res.dataList
      this.total = res.count
    },
    // // 删除按钮
    async deleteById(row) {
      await this.$confirm('此操作为永久删除，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await this.$http
            .delete(`/record/delete/${row.recordId}`)
            .then((res) => {
              if(this.tableData.length === 1 && this.queryInfo.page !== 1) {
                this.queryInfo.page--
              }
              this.$message.success(res.data.message)
            })
            .finally(() => {
              // 重新获取数据
              this.findAll(this.queryInfo.page)
            })
        })
        .catch(() => {
          this.$message.info('当前操作取消')
        })
    },
  }
}
</script>

<style>

</style>